<script setup lang="ts">
import { ToolbarNames } from 'md-editor-v3';
import { ref } from 'vue';
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import useStore from '@/store';
import { storeToRefs } from 'pinia';
const { user } = useStore();
const { user_id } = storeToRefs(user);
const text = ref('');
const toolbars = [
	'bold',
	'underline',
	'italic',
	'-',
	'strikeThrough',
	'sub',
	'sup',
	'quote',
	'unorderedList',
	'orderedList',
	'-',
	'codeRow',
	'code',
	'link',
	'image',
	'table',
	'mermaid',
	'katex',
	'-',
	'revoke',
	'next',
	'save',
	'=',
	'catalog',
	'pageFullscreen',
	'fullscreen',
	'preview',
	'htmlPreview',
	'github'
];
</script>

<template>
	<md-editor v-model="text" @onSave="" :toolbars="(toolbars as ToolbarNames[])" />
</template>

<style lang="scss" scoped>
#md-editor-v3 {
	width: 100%;
	height: 100%;
}
</style>
